<!--
 * @Author       : wfl
 * @LastEditors: qiye
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-18 09:34:28
 * @LastEditTime: 2023-11-20 10:18:04
-->
<script lang="ts">
import { ikStore } from 'iking-utils'
import { pageManage as api } from '@/MainApp/apis/manage-design'

export default {
  name: 'AutoRanderPage',
  props: {},
  data() {
    return {
      formJson: null,
      baseUrl: import.meta.env.VITE_APP_API_BASEURL,
      globalDatasourceHeaders: [
        {
          name: 'Authorization',
          value: useToken()
        },
        {
          name: 'Token',
          value: 'qiye'
        },
        {
          name: 'Menu-Id',
          value: ikStore.local.getItem('menuid')
        }
      ]
    }
  },
  created() {
    this.details()
  },
  methods: {
    dealJson(json: any) {
      return json
    },

    async details() {
      const router = useRouter()
      const { msgError } = useMessage()
      const that: any = this
      const idStartIndex = that.$route.path.lastIndexOf('/')
      const id = that.$route.path.substring(idStartIndex + 1)
      const { success, data, msg } = await api.details(id)
      if (success) {
        if (data.json) {
          that.formJson = that.dealJson(JSON.parse(data.json))
        }
        else {
          msgError('请在功能设计中配置界面')
          router.push('/function-design/manage-design')
        }

        if (import.meta.env.DEV)
          this.baseUrl = data.url || useHttpUrl().baseUrl
      }
      else {
        router.push('/')
        msgError(msg)
      }
    }
  }
}
</script>

<template>
  <IkPageMain fixed>
    <div v-if="formJson" class="auto-render vform-bg">
      <el-scrollbar class="scroll-bar">
        <v-form-render
          ref="vFormRef"
          class="v-form-render"
          :global-dsv="{}"
          :form-json="formJson"
          :global-datasource-headers="globalDatasourceHeaders"
        />
      </el-scrollbar>
    </div>
  </IkPageMain>
</template>

<style lang="scss" scoped>
.auto-render{
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow-x: hidden;

}

.scroll-bar{
  height: 100%;
}

.v-form-render{
  width: 100%;
  height: 100%;
}
</style>
